<template>
    <div class="maindivcontainer">
        <div class="container">
            <div class="qu-wrap">
                <header>
                    <span @click="iterator = backBtn(), iterator.next()">&lt; 返回</span>
                    <p v-show="!titleEditing" @click="titleEditing = true">{{ tempTitle }}</p>
                    <input type="text"
                           v-focus
                           v-model="title"
                           :class="{inlineShow: titleEditing}"
                           @focus="_title = title"
                           @blur="titleEditing = false"
                           @keyup.esc="cancelTitleEdit()"
                           @keyup.enter="doneTitleEdit()">
                </header>
                <div class="qu-content">
                    <section class="qu-item"
                             v-for="(item, index) in questions"
                             :class="{nowEditing: curIndex === index && topicEditing, optEditing: curIndex === index}">
                        <h3 @click="curIndex = index, curOptIndex='', topicEditing = true">
                            <span class="qu-num">{{`Q${index + 1}`}}</span>
                            <span class="qu-topic">{{ item.description != null ? item.description : item.topic }}</span>
                            <input type="text"
                                   v-focus
                                   v-model="topic"
                                   @focus="_topic = topic"
                                   @blur="curIndex='', topic=''"
                                   @keyup.esc="cancelTopicEdit()"
                                   @keyup.enter="doneTopicEdit(index)">
                            <span v-if="item.isMandatory === 1"> *</span>
                        </h3>
                        <template v-if="item.type === 'textarea'">
                            <textarea rows="8" cols="80"></textarea>
                            <label id="require-check">
                                <input type="checkbox"
                                       v-model:checked="item.isMandatory"
                                       @change="checkboxAnswer($event, index, questions)">
                                此题是否必填
                            </label>
                        </template>
                        <ul v-else class="options-list">
                            <li v-for="(option, optIndex) in item.options"
                                :class="{optionEditing: curOptIndex === optIndex}">
							<span class="optionText"
                                  @click="curIndex=index, curOptIndex=optIndex, topicEditing = false">{{ option }}</span>
                                <input type="text"
                                       v-focus
                                       v-model="optionText"
                                       @focus="_optionText = optionText"
                                       @blur="curIndex='', optionText=''"
                                       @keyup.esc="cancelOptionEdit()"
                                       @keyup.enter="doneOptionEdit(index, optIndex)">

                                <ul class="opt-ctrl">
                                    <li v-if="optIndex !== 0"
                                        @click="moveUp(optIndex, item.options)">上移
                                    </li>
                                    <li v-if="optIndex !== item.options.length - 1"
                                        @click="moveDown(optIndex, item.options)">下移
                                    </li>
                                    <li v-else @click="addOption(item.options)">添加</li>
                                    <li @click="delOption(optIndex, item.options)">删除</li>
                                </ul>
                            </li>
                        </ul>
                        <ul class="operat-list">
                            <li v-if="index !== 0"
                                @click="moveUp(index)">上移
                            </li>
                            <li v-if="index !== questions.length - 1"
                                @click="moveDown(index)">下移
                            </li>
                            <li @click="reuse(index)">复用</li>
                            <li @click="delQuestion(index)">删除</li>
                        </ul>
                        <div></div>
                    </section>
                    <div class="add-box">
                        <p class="qu-type" :class="{expand: isAdding}">
                            <span @click="addType('radio')">单选题</span>
                            <span @click="addType('checkbox')">多选题</span>
                            <span @click="addType('textarea')">文本题</span>
                        </p>

                        <p class="add-btn" @click="isAdding = !isAdding">
                            <span>+ 添加问题</span>
                        </p>
                    </div>
                </div>
                <footer>
                    <div class="date-part">
                        <label>问卷截止日期
                            <input type="text"
                                   readonly="true"
                                   v-model="date"
                                   @click="isShowDatepicker = !isShowDatepicker">
                        </label>
                        <date-components id="date-picker"
                                         v-show="isShowDatepicker"
                                         @sendDate="changeDate">
                        </date-components>
                    </div>
                    <div class="ctrl-part">
                        <span @click="iterator = saveBtn(), iterator.next()" style="width:110px">保存问卷</span>
                        <span @click="iterator = releaseBtn(), iterator.next()" style="width:110px">发布问卷</span>
                    </div>
                </footer>
            </div>
            <div class="overlay" v-show="isShowPrompt">
                <div class="prompt-box">
                    <header>
                        <span>提示</span>
                        <a href="javascript:;" @click="isShowPrompt = false">&times;</a>
                    </header>
                    <p>{{ promptText }}</p>
                    <footer>
                        <span @click="isShowPrompt = false, iterator && iterator.next()">确定</span>
                        <span @click="isShowPrompt = false">取消</span>
                    </footer>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Data from '../data.js';
    import Store from '../store.js';
    import Datepicker from './Datepicker.vue';

    export default {
        name: 'Edit',
        components: {
            'date-components': Datepicker
        },
        data() {
            return {
                index: '',
                quData: {},
                questions: [],
                questionTemplate: {
                    radio: {
                        "type": "radio",
                        "topic": "单选题",
                        "options": ["选项1", "选项2", "选项3", "选项4"]
                    },
                    checkbox: {
                        "type": "checkbox",
                        "topic": "多选题",
                        "options": ["选项1", "选项2", "选项3", "选项4"]
                    },
                    textarea: {
                        "type": "textarea",
                        "topic": "文本题",
                        "isMandatory": 0
                    }
                },
                quList: Store.fetch(),
                date: '',
                title: '',
                _title: '',
                topic: '',
                _topic: '',
                optionText: '',
                _optionText: '',
                curIndex: '',
                curOptIndex: '',
                promptText: '',
                iterator: {},
                isAdding: false,
                titleEditing: false,
                topicEditing: false,
                isShowPrompt: false,
                isShowDatepicker: false,
                selectquestionnaireId: this.$route.params.id,
                userId: sessionStorage.getItem("id"),
            }
        },

        beforeRouterEnter(to, from, next) {
            let id = to.params.id;
            let item = {};
            if (id !== 0) {
                console.log("Store.fetch()");
                console.log(Store.fetch());
                let length = Store.fetch().length;
                if (id < 0 || id > length) {
                    alert('非法路由');
                    next('');
                } else {
                    item = Store.fetch()[id - 1];
                }

                if (item.state === 0) {
                    next();
                } else {
                    alert('非法路由');
                    next('/');
                }
            } else {
                next();
            }
        },

        created() {
            const _this = this;
            this.getData();
            if (_this.selectquestionnaireId != 0) {
                this.axios.get("http://localhost:8088/questionnaire/" + _this.selectquestionnaireId).then(function (resp) {
                    _this.quData = resp.data;
                    _this.questions = _this.quData.questions;
                    console.log("_this.quData");
                    console.log(_this.quData);
                    console.log("_this.questions");
                    console.log(_this.questions);
                });

                this.axios.get("http://localhost:8088/getQuestionnaire").then(function (resp) {
                    _this.quList = resp.data;
                    console.log("_this.quList");
                    console.log(_this.quList);
                })
            }
            console.log(this.tempTitle);
        },

        computed: {
            tempTitle() {
                return this.title || this.quData.name;
            }
        },

        methods: {
            getData() {
                let id = this.selectquestionnaireId;
                if (id === 0) {
                    let item = {};
                    item.id = this.quList.length + 1;
                    item.name = `问卷调查${item.id}`;
                    item.state = 0;
                    item.stateName = '未发布';
                    item.createTime = '2020-12-31';
                    item.questions = [];
                    this.quData = item;
                } else {
                }
                //this.quData = this.quList[id - 1];
                this.date = this.quData.createTime;
                this.title = this.quData.name;
                this.index = this.quData.id - 1;
                this.questions = this.quData.questions;
            },

            changeDate(date) {
                let nowTime = Date.now();
                let chioceTime = new Date(date.replace(/-/g, ',')) * 1;
                if (chioceTime < nowTime) {
                    this.iterator = null;
                    this.showPrompt(`选择的日期不能早于当前日期，请重新选择！`);
                    return;
                }
                this.date = date;
            },

            cancelTitleEdit() {
                this.titleEditing = false;
                this.title = this._title;
            },

            doneTitleEdit(){
                this.titleEditing = false;
                this.quData.name = this.title;
            },

            cancelTopicEdit() {
                this.topicEditing = false;
                this.topic = this._topic;
            },

            cancelOptionEdit() {
                this.curOptIndex = '';
                this.optionText = this._optionText;
            },

            checkboxAnswer(event, index, questions) {
                if (event.target.checked) {
                    this.questions[index].isMandatory = 1;
                }
                else {
                    this.questions[index].isMandatory = 0;
                }
            },

            doneTopicEdit(index) {
                this.topicEditing = false;
                this.questions[index].description = this.topic;
            },

            doneOptionEdit(index, optIndex) {
                this.curOptIndex = '';
                this.questions[index].options[optIndex] = this.optionText;
            },

            switchItem(index, array) {
                this.optIndex = '';
                this.curIndex = '';

                let arr = array.splice(index, 2);
                array.splice(index, 0, ...arr.reverse());
            },

            moveUp(index, array) {
                this.switchItem(index - 1, array);
            },

            moveDown(index, array) {
                this.switchItem(index, array);
            },

            errorPrompt(text) {
                this.iterator = null;
                this.showPrompt(text);
            },

            reuse(index) {
                if (this.questions.length === 10) {
                    this.errorPrompt(`每份问卷至多10个问题！`);
                    return;
                }
                let oldQuestion = this.questions[index];
                let newQuestion = JSON.parse(JSON.stringify(oldQuestion));
                this.questions.splice(index, 0, newQuestion);
            },

            delQuestion(index) {
                if (this.questions.length <= 1) {
                    this.errorPrompt(`每份问卷至少一个问题！`);
                    return;
                }
                this.questions.splice(index, 1);
            },

            delOption(index, options) {
                if (options.length <= 2) {
                    this.errorPrompt(`每个问题至少两个选项`);
                    return;
                }
                options.splice(index, 1)
            },

            addOption(options) {
                if (options.length === 4) {
                    this.errorPrompt(`每个问题至多四个选项`);
                    return;
                }
                options.push(`请编辑选项内容`);
                console.log(options);
            },

            showPrompt(text) {
                this.promptText = text;
                this.isShowPrompt = true;
            },

            addType(type) {
                if (this.questions.length === 10) {
                    this.errorPrompt(`每份问卷至多10个问题！`);
                    return;
                }
                if (type === 'radio') {
                    let radioType = {
                        "description": "单选题",
                        "id": 0,
                        "multiSelect": 0,
                        "options": ["选项1", "选项2", "选项3", "选项4"],
                        "questionnaireId": this.selectquestionnaireId,
                        "type": "radio",
                        "isMandatory": 1,
                    };
                    this.questions.push(radioType);
                }
                if (type === 'checkbox') {
                    let checkboxType = {
                        "description": "多选题",
                        "id": 0,
                        "multiSelect": 1,
                        "options": ["选项1", "选项2", "选项3", "选项4"],
                        "questionnaireId": this.selectquestionnaireId,
                        "type": "checkbox",
                        "isMandatory": 1,
                    };
                    this.questions.push(checkboxType);
                }
                if (type === 'textarea') {
                    let textareaType = {
                        "description": "文本题",
                        "id": 0,
                        "questionnaireId": this.selectquestionnaireId,
                        "type": "textarea",
                        "isMandatory": 0,
                    }
                    this.questions.push(textareaType);
                }
                console.log("this.questions");
                console.log(this.questions);
            },

            saveData() {
                if (this.questions.length < 1) {
                    this.errorPrompt(`每份问卷至少一个问题！`);
                    return;
                }

                this.quData.title = this.title;
                this.quData.time = this.date;
                this.quData.questions = [...this.questions];

                if (this.index === this.quList.length) {
                    this.quList.push(this.quData);
                } else {
                    this.quList.splice(this.index, 1, this.quData);
                }
            },
            saveQuestions: function (questions) {
                this.axios({
                    url: "http://localhost:8088/saveQuestion",
                    headers: {
                        'Content-Type': 'application/json;charset=utf-8'
                    },
                    method: "post",
                    params: {
                        'questions': encodeURI(JSON.stringify(questions))
                    }
                }).then(function (resp) {
                    console.log("resp.data");
                    console.log(resp.data);
                })
            },
            saveQuestionnaire: function (quDate) {
                if(this.$route.params.id === 0) {
                    this.axios({
                        url: "http://localhost:8088/saveQuestionnaire",
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        method: "post",
                        params: {
                            'quDate': encodeURI(JSON.stringify(quDate))
                        }
                    }).then({})
                }else{
                    this.axios({
                        url: "http://localhost:8088/updateQuestionnaire",
                        headers: {
                            'Content-Type': 'application/json;charset=utf-8'
                        },
                        method: "post",
                        params: {
                            'quDate': encodeURI(JSON.stringify(quDate))
                        }
                    }).then({})
                }
            },
            * backBtn() {
                yield this.showPrompt(`确认未保存回到主页吗？`);
                yield this.$router.push({path: '/index'});
            }
            ,

            * saveBtn() {
                var r = confirm("确认要保存问卷？");
                if (r == true) {
                    this.quData.publishId = sessionStorage.getItem("id");
                    this.saveQuestionnaire(this.quData);
                    this.saveQuestions(this.questions);
                    this.$router.push({path: '/index'});
                } else {
                    return;
                }
            }
            ,

            * releaseBtn() {
                var r = confirm("确认要保存并发布问卷？");
                if (r == true) {
                    this.quData.publishId = sessionStorage.getItem("id");
                    this.quData.publishState = 1;
                    this.saveQuestionnaire(this.quData);
                    this.saveQuestions(this.questions);
                    this.saveData();
                    this.$router.push({path: '/index'});
                    var q = confirm("发布成功，访问问卷的连接http://localhost:8080/fill/" + this.quData.id);
                    if (q == true) {
                        return;
                    } else {
                        return;
                    }
                } else {
                    return;
                }
            }
            ,
        },

        directives: {
            focus: {
                update: el => el.focus(),
            }
        }
        ,

        watch: {
            quList: {
                handler(list) {
                    Store.save(list);
                    this.iterator && this.iterator.next();
                }
            }
        }
    }

</script>

<style scoped lang="scss">

    @import '../style/_Edit';
</style>
